<template>
  <div class="product-management">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="产品名称：">
        <el-input v-model="queryForm.productName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="产品型号：">
        <el-select v-model="queryForm.model" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="型号1" value="model1"></el-option>
          <el-option label="型号2" value="model2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品状态：">
        <el-select v-model="queryForm.status" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="状态1" value="status1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="addProduct">添加</el-button>
      <el-button type="primary" @click="importProducts">导入</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="productCode" label="产品编号" width="180"></el-table-column>
      <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
      <el-table-column prop="productCategory" label="产品分类" width="180"></el-table-column>
      <el-table-column prop="productType" label="型号" width="180"></el-table-column>
      <el-table-column prop="productDrawingNumber" label="产品图号" width="180"></el-table-column>
      <el-table-column prop="inventory" label="库存" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="mini" @click="editProduct(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteProduct(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref, reactive,onMounted} from 'vue';
import { useRouter } from "vue-router";
import {queryProduct} from '@/api/product.js'


// 初始化查询表单数据
const queryForm = reactive({
  productName: '',
  model: '',
  status: ''
});
onMounted(()=>{
  init();
})
async function init() {
  const res = await queryProduct();
  console.log(res)
  products.value = res.data;
}
// 示例数据
const products = ref([
  {
    id: 'PDT001',
    name: '产品A',
    category: '分类1',
    model: '型号1',
    drawingNumber: 'DRAW001',
    inventory: 50,
    creator: '张三',
    status: '已发布'
  },
  // 其他产品数据...
]);
// 创建路由跳转实例
let router = useRouter();
// 查询方法
function search() {
  console.log('查询条件:', queryForm);
}

// 重置方法
function reset() {
  queryForm.productName = '';
  queryForm.model = '';
  queryForm.status = '';
}

// 添加产品
function addProduct() {
  router.push('/product/add');
  console.log('添加产品');
}

// 导入产品
function importProducts() {
  console.log('导入产品');
}

// 编辑产品
function editProduct(product) {
  console.log('编辑产品:', product);
}

// 删除产品
function deleteProduct(product) {
  console.log('删除产品:', product);
}
</script>

<style scoped>
.product-management {
  padding: 20px;
}
</style>
